<template>
  <div>
    <van-nav-bar fixed title="扫码支付" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="content-box bg-white mt-20 mlr-25 pt-30 plr-40 pb-60">
        <div class="is-120 block-center br-full mb-35">
          <img class :src="shopImg" alt srcset>
        </div>
        <h1 class="tac fs-32 mb-40 lh-xxs">{{ shopName }}</h1>
        <p>订单金额</p>

        <van-form class="form-box" @submit="onSubmit">
          <van-field
            v-model="price"
            type="number"
            name="姓名"
            label
            placeholder="请输入订单金额"
            :rules="[{ required: true,message:' '}]"
          />
          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="value"
            label="优惠券"
            @click="showPicker = true"
          />
          <p class="flex-s-c hb">
            <span>最高可优惠金额</span>
            <span>￥100</span>
          </p>
          <p class="flex-s-c">
            <span>我的班贝积分</span>
            <span>2653</span>
          </p>
          <p class="flex-s-c hb">
            <span>我的消费金</span>
            <span>2653</span>
          </p>
          <p>实际支付金额</p>
          <p class="tac fs-60 mtb-60 lh-xxs">{{ kkamount }}</p>
          <div class="pb-60 flex-center">
            <van-button
              class="hollow-btn flex-g-1 br-12"
              native-type="submit"
              @click="show = true"
            >立即支付</van-button>
          </div>
        </van-form>
        <van-popup v-model="showPicker" closeable close-icon="cross" position="bottom">
          <!-- 优惠券弹出层 -->
          <div class="coupon-box">
            <h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
            <van-tabs v-model="active" animated>
              <van-tab :title="'未使用(' + index + ')'">
                <ul class="coupon-list mg-30">
                  <li class="coupon-item mb-30 flex-s-c">
                    <div class="item-left flex-s-c flex-1 br-12">
                      <p class="left-box flex-center fs-48 color-second tac flex-g-0 flex-s-0">￥100</p>
                      <div class="right-box flex-s-c flex-1 plr-20">
                        <div>
                          <h2 class="fs-32 fw-b lh">新人专享券</h2>
                          <p class="fs-24 color-gray">2020.06.24-2021.06.2</p>
                          <p class="fs-24 color-gray">所需积分：362</p>
                        </div>
                        <div class="check-box">
                          <SvgIcon icon-class="checked" class-name="check-box-active" />
                        </div>
                      </div>
                      <!-- 上下两个半圆 -->
                      <div class="cicle-top" />
                      <div class="cicle-bottom" />
                    </div>
                    <div class="item-right flex-d-c flex-s-c flex-0 br-12">
                      <span>+</span>
                      <span>1</span>
                      <span>-</span>
                    </div>
                  </li>
                </ul>
              </van-tab>
              <van-tab :title="'可兑换(' + index + ')'">内容2</van-tab>
            </van-tabs>
          </div>
        </van-popup>
        <van-dialog v-model="show" :show-confirm-button="false" class="pd-20">
          <div v-if="pay">
            <h2 class="fs-34 fw-600 tac dialog-title mb-30 mt-10">
              <van-icon name="cross" class="dialog-close" @click="show = false" />请选择支付方式
            </h2>
            <van-radio-group v-model="radio">
              <van-cell clickable class="flex-s-c" @click="radio = '1'">
                <template #title>
                  <SvgIcon icon-class="wechatpay" class="mr-30 fs-40" />
                  <span class="custom-title">微信支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="1">
                    <template #icon="props">
                      <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                    </template>
                  </van-radio>
                </template>
              </van-cell>
              <van-cell clickable @click="radio = '2'">
                <template #title>
                  <SvgIcon icon-class="balance" class="mr-30 fs-40" />
                  <span class="custom-title">余额支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="2">
                    <template #icon="props">
                      <div :class="[{ 'radio-box-active': props.checked }, 'radio-box']" />
                    </template>
                  </van-radio>
                </template>
              </van-cell>
            </van-radio-group>
            <div class="flex-center pt-50">
              <van-button class="hollow-btn flex-g-1 br-6" @click="show = false">确认</van-button>
            </div>
          </div>
          <div v-if="!pay">
            <div class="flex-center flex-d-c fs-32">
              <SvgIcon icon-class="paySuccess" class-name="fs-160 color-primary mt-20" />
              <p class="pb-60 color-primary">支付成功</p>
              <p class="fw-600 ls-4">付款金额￥698.00</p>
              <p class="fs-28 color-gray-light pb-40">
                此次支付获得
                <span class="color-second">50积分</span>
              </p>
            </div>
            <div class="flex-center pt-50">
              <van-button class="hollow-btn flex-g-1 br-6" @click="show = false">确认</van-button>
            </div>
          </div>
        </van-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import shopImg from 'assets/images/bussiness_goods4.png'
import utils from 'utils/utils.js'
export default {
  components: {
    SvgIcon
  },
  data() {
    return {
      shopImg,
      index: 3,
      shopName: '好实用科技',
      price: '',
      value: '选择优惠券',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
      show: false,
      radio: '1',
      pay: true
    }
  },
  computed: {
    // 计算属性的 getter
    kkamount: function() {
      // `this` 指向 vm 实例
      return utils.changePrice2money(this.price)
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content-box {
  border-radius: 0 0 12px 12px;
}
.form-box {
  p {
    &.flex-s-c {
      padding-bottom: 20px;
    }
    &.hb {
      margin-bottom: 20px;
    }
  }
  .van-cell {
    padding-left: 0;
    padding-right: 0;
    &::after {
      left: 0;
    }
  }
  .van-cell:first-child {
    position: relative;
    font-size: 20px;
    &::before {
      content: '￥';
    }
  }
  .van-cell:nth-child(2) {
    /deep/.van-field__control {
      text-align: right;
    }
    &:after {
      content: none;
    }
  }
}
.van-popup {
  border-radius: 30px 30px 0 0;
}
.coupon-box {
  /deep/.van-tabs__line {
    @include bg-primary();
  }
  /deep/.van-hairline--top-bottom:after {
    border-width: 0 0 1px 0;
  }
}
/deep/.van-popup__close-icon {
  top: 10px;
}

/* 优惠券列表 */
.coupon-list {
  position: relative;
  height: 190px;
  .coupon-item {
    height: 100%;
    .item-left,
    .item-right {
      position: relative;
      border: 1px solid;
      @include border-primary;
      height: 100%;
    }
    .item-left {
      .left-box {
        width: 225px;
        height: 100%;
        // position: relative;
        &:after {
          content: '';
          position: absolute;
          width: 0;
          height: 80%;
          top: 10%;
          left: 225px;
          border-right: 1px dashed;
          @include border-primary;
        }
      }
      .cicle-top,
      .cicle-bottom {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        border: 1px solid;
        left: 213px;
        background: $colorBg;
        border-color: transparent !important;
        @include border-primary(left-color);
        @include border-primary(bottom-color);
      }
      .cicle-top {
        top: -13px;
        transform: rotate(-45deg);
      }
      .cicle-bottom {
        bottom: -13px;
        transform: rotate(135deg);
      }
    }
    .item-right {
      border-left: none;
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        // background: $primary;
        @include bg-primary;
        opacity: 0.1;
        top: 0;
      }
      span {
        font-size: 40px;
        display: inline-block;
        height: 30%;
        padding: 0 30px;
      }
    }
  }
}
/* 弹窗 */
.dialog-title {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 20%;
    height: 0;
    border: 2px solid;
    @include border-primary;
    bottom: 0;
    left: 40%;
  }
  .dialog-close {
    position: absolute;
    line-height: 2em;
    top: 0;
    left: 32px;
    font-weight: 600;
  }
}
.van-radio-group--horizontal {
  flex-direction: column;
}
.van-radio--horizontal {
  margin-right: 0;
}
/deep/.van-cell__title {
  @extend %block-center;
}
.radio-box {
  @include chose-box(32px, 32px);
}
.radio-box-active {
  border: 1px solid;
  @include border-primary;
  &:after {
    content: '';
    width: 70%;
    height: 70%;
    border-radius: 100%;
    @include bg-primary;
    position: absolute;
    top: 15%;
    left: 15%;
  }
}
</style>
